<template>
    <div class="my-dataMart">
        <div class="title">
            <div class="title-left">
                <img alt="" src="/img/slices/logo.png"/>
                <div style="font-size: 16px; font-weight: bold;color: #DFEEF3;">{{ form.title }}</div>
            </div>
            <div class="title-right">
                <el-button
                        type="text"
                        :class="{'button-selected': selectedButton === 'week', 'button-unselected': selectedButton !== 'week'}"
                        @click="select('week')">周
                </el-button>
                <el-divider direction="vertical"></el-divider>
                <el-button
                        type="text"
                        :class="{'button-selected': selectedButton === 'month', 'button-unselected': selectedButton !== 'month'}"
                        @click="select('month')">月
                </el-button>
                <el-divider direction="vertical"></el-divider>
                <el-button
                        type="text"
                        :class="{'button-selected': selectedButton === 'year', 'button-unselected': selectedButton !== 'year'}"
                        @click="select('year')">年
                </el-button>
            </div>
        </div>
        <div ref="chart" class="chart"></div>
    </div>
</template>


<script>
import * as echarts from 'echarts'
import {heightConfig3, set_option_dataMart_base} from "@/utils/loadPage";

// 数据集
export default {
    name: 'MyDataMart',
    data() {
        return {
            max_Height: heightConfig3(),
            form: {
                title: '设备活跃率',  // 图表标题
                title_center: '10px', // 标题位置
                x_name: '设备',
                dimensions: [], // 维度 (数据集的分类)
                color: '#fff',
                title_color: '#fff',
                x_color: '#8A9ECF',
                y_color: '#8A9ECF',
                x_line_color: '#1F63A3',
                y_line_color: '#1F63A3',
                dataList: [] // 所有数据
            },
            selectedButton: 'week', // 默认选中“周”
        }
    },
    mounted() {
        this.handleResize()
        // 组件挂载时监听窗口大小变化事件，并设置定时器定时获取支付信息
        window.addEventListener('resize', this.handleResize);
        this.timer = setInterval(this.handleResize, 10000)
    },
    beforeDestroy() {
        // 组件销毁前移除窗口大小变化事件监听，销毁 ECharts 实例，并清除定时器和 sessionStorage
        window.removeEventListener('resize', this.handleResize);
        if (this.myChart) {
            this.myChart.dispose(); // 销毁 ECharts 实例
        }
        clearInterval(this.timer)
        sessionStorage.clear()
    },

    methods: {
        select(button) {
            this.selectedButton = button;
            console.log('选中~~~', button)
        },
        handleResize() {
            // 处理窗口大小变化事件，重新获取支付信息
            console.log('Window resized');
            this.max_Height = heightConfig3();
            this.get_data();
            this.set_option()
        },

        set_option() {
            // 设置图表选项，如果已有图表实例则销毁旧的，重新初始化并设置新选项
            if (this.myChart) {
                this.myChart.dispose(); // 销毁 ECharts 实例
            }
            this.myChart = echarts.init(this.$refs.chart) // 初始化 ECharts 实例
            let option = set_option_dataMart_base(this, this.form)
            this.myChart.setOption(option) // 设置图表选项
        },

        get_data() {
            this.form.dimensions = ['product', '60-70', '70-80', '80岁以上']
            this.form.dataList = [
                {product: '一键通', '60-70': 43.3, '70-80': 85.8, '80岁以上': 93.7},
                {product: '血压计', '60-70': 83.1, '70-80': 73.4, '80岁以上': 55.1},
                {product: '血糖计', '60-70': 86.4, '70-80': 65.2, '80岁以上': 82.5},
                {product: '血氧仪', '60-70': 72.4, '70-80': 53.9, '80岁以上': 39.1}
            ]

        }
    }

}


</script>

<style scoped lang="scss">

.my-dataMart {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;

    .title {
        flex: 1;
        box-sizing: border-box;
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        //border: orange solid 1px;

        .title-left {
            flex: 1;
            display: flex;
            justify-content: left;
            align-items: center;
            padding-left: 2%;

            img {
                width: 9%;
                padding-right: 2%;
            }
        }

        .title-right {
            flex: 1;
            display: flex;
            justify-content: right;
            align-items: center;
            padding-right: 6%;


            .el-button {
                font-size: 16px;
                color: #37D6AF;
                font-weight: bold;
            }

            .button-selected {
                color: white; /* 选中状态的文字颜色 */
            }

            .button-unselected {
                color: #37D6AF; /* 未选中状态的文字颜色 */
            }


            ::v-deep .el-divider--vertical {
                width: 1.1%;
                background-color: #37D6AF;
                opacity: 0.5;
            }

        }
    }

    .chart {
        flex: 7;
        width: 100%;
        height: 100%;
        box-sizing: border-box;
        overflow: hidden;
    }
}


</style>
